/* Bootstrap-like spacing utilities (0–5 + auto for margins) */

/* scale (matches Bootstrap 5 defaults) */
:root{
  --bs-spacer-0: 0;
  --bs-spacer-1: 0.25rem;
  --bs-spacer-2: 0.5rem;
  --bs-spacer-3: 1rem;
  --bs-spacer-4: 1.5rem;
  --bs-spacer-5: 3rem;
}

/* ---------- Padding ---------- */
.p-0  { padding: var(--bs-spacer-0) !important; }
.p-1  { padding: var(--bs-spacer-1) !important; }
.p-2  { padding: var(--bs-spacer-2) !important; }
.p-3  { padding: var(--bs-spacer-3) !important; }
.p-4  { padding: var(--bs-spacer-4) !important; }
.p-5  { padding: var(--bs-spacer-5) !important; }

.px-0 { padding-left:  var(--bs-spacer-0) !important; padding-right: var(--bs-spacer-0) !important; }
.px-1 { padding-left:  var(--bs-spacer-1) !important; padding-right: var(--bs-spacer-1) !important; }
.px-2 { padding-left:  var(--bs-spacer-2) !important; padding-right: var(--bs-spacer-2) !important; }
.px-3 { padding-left:  var(--bs-spacer-3) !important; padding-right: var(--bs-spacer-3) !important; }
.px-4 { padding-left:  var(--bs-spacer-4) !important; padding-right: var(--bs-spacer-4) !important; }
.px-5 { padding-left:  var(--bs-spacer-5) !important; padding-right: var(--bs-spacer-5) !important; }

.py-0 { padding-top:   var(--bs-spacer-0) !important; padding-bottom: var(--bs-spacer-0) !important; }
.py-1 { padding-top:   var(--bs-spacer-1) !important; padding-bottom: var(--bs-spacer-1) !important; }
.py-2 { padding-top:   var(--bs-spacer-2) !important; padding-bottom: var(--bs-spacer-2) !important; }
.py-3 { padding-top:   var(--bs-spacer-3) !important; padding-bottom: var(--bs-spacer-3) !important; }
.py-4 { padding-top:   var(--bs-spacer-4) !important; padding-bottom: var(--bs-spacer-4) !important; }
.py-5 { padding-top:   var(--bs-spacer-5) !important; padding-bottom: var(--bs-spacer-5) !important; }

/* t/b and start/end (Bootstrap uses logical “start/end”) */
.pt-0 { padding-top:    var(--bs-spacer-0) !important; } .pt-1 { padding-top:    var(--bs-spacer-1) !important; }
.pt-2 { padding-top:    var(--bs-spacer-2) !important; } .pt-3 { padding-top:    var(--bs-spacer-3) !important; }
.pt-4 { padding-top:    var(--bs-spacer-4) !important; } .pt-5 { padding-top:    var(--bs-spacer-5) !important; }

.pb-0 { padding-bottom: var(--bs-spacer-0) !important; } .pb-1 { padding-bottom: var(--bs-spacer-1) !important; }
.pb-2 { padding-bottom: var(--bs-spacer-2) !important; } .pb-3 { padding-bottom: var(--bs-spacer-3) !important; }
.pb-4 { padding-bottom: var(--bs-spacer-4) !important; } .pb-5 { padding-bottom: var(--bs-spacer-5) !important; }

.ps-0 { padding-left:   var(--bs-spacer-0) !important; } .ps-1 { padding-left:   var(--bs-spacer-1) !important; }
.ps-2 { padding-left:   var(--bs-spacer-2) !important; } .ps-3 { padding-left:   var(--bs-spacer-3) !important; }
.ps-4 { padding-left:   var(--bs-spacer-4) !important; } .ps-5 { padding-left:   var(--bs-spacer-5) !important; }

.pe-0 { padding-right:  var(--bs-spacer-0) !important; } .pe-1 { padding-right:  var(--bs-spacer-1) !important; }
.pe-2 { padding-right:  var(--bs-spacer-2) !important; } .pe-3 { padding-right:  var(--bs-spacer-3) !important; }
.pe-4 { padding-right:  var(--bs-spacer-4) !important; } .pe-5 { padding-right:  var(--bs-spacer-5) !important; }

/* ---------- Margin ---------- */
.m-0  { margin: var(--bs-spacer-0) !important; }
.m-1  { margin: var(--bs-spacer-1) !important; }
.m-2  { margin: var(--bs-spacer-2) !important; }
.m-3  { margin: var(--bs-spacer-3) !important; }
.m-4  { margin: var(--bs-spacer-4) !important; }
.m-5  { margin: var(--bs-spacer-5) !important; }

.mx-0 { margin-left:  var(--bs-spacer-0) !important; margin-right: var(--bs-spacer-0) !important; }
.mx-1 { margin-left:  var(--bs-spacer-1) !important; margin-right: var(--bs-spacer-1) !important; }
.mx-2 { margin-left:  var(--bs-spacer-2) !important; margin-right: var(--bs-spacer-2) !important; }
.mx-3 { margin-left:  var(--bs-spacer-3) !important; margin-right: var(--bs-spacer-3) !important; }
.mx-4 { margin-left:  var(--bs-spacer-4) !important; margin-right: var(--bs-spacer-4) !important; }
.mx-5 { margin-left:  var(--bs-spacer-5) !important; margin-right: var(--bs-spacer-5) !important; }

.my-0 { margin-top:   var(--bs-spacer-0) !important; margin-bottom: var(--bs-spacer-0) !important; }
.my-1 { margin-top:   var(--bs-spacer-1) !important; margin-bottom: var(--bs-spacer-1) !important; }
.my-2 { margin-top:   var(--bs-spacer-2) !important; margin-bottom: var(--bs-spacer-2) !important; }
.my-3 { margin-top:   var(--bs-spacer-3) !important; margin-bottom: var(--bs-spacer-3) !important; }
.my-4 { margin-top:   var(--bs-spacer-4) !important; margin-bottom: var(--bs-spacer-4) !important; }
.my-5 { margin-top:   var(--bs-spacer-5) !important; margin-bottom: var(--bs-spacer-5) !important; }

.mt-0 { margin-top:    var(--bs-spacer-0) !important; } .mt-1 { margin-top:    var(--bs-spacer-1) !important; }
.mt-2 { margin-top:    var(--bs-spacer-2) !important; } .mt-3 { margin-top:    var(--bs-spacer-3) !important; }
.mt-4 { margin-top:    var(--bs-spacer-4) !important; } .mt-5 { margin-top:    var(--bs-spacer-5) !important; }

.mb-0 { margin-bottom: var(--bs-spacer-0) !important; } .mb-1 { margin-bottom: var(--bs-spacer-1) !important; }
.mb-2 { margin-bottom: var(--bs-spacer-2) !important; } .mb-3 { margin-bottom: var(--bs-spacer-3) !important; }
.mb-4 { margin-bottom: var(--bs-spacer-4) !important; } .mb-5 { margin-bottom: var(--bs-spacer-5) !important; }

.ms-0 { margin-left:   var(--bs-spacer-0) !important; } .ms-1 { margin-left:   var(--bs-spacer-1) !important; }
.ms-2 { margin-left:   var(--bs-spacer-2) !important; } .ms-3 { margin-left:   var(--bs-spacer-3) !important; }
.ms-4 { margin-left:   var(--bs-spacer-4) !important; } .ms-5 { margin-left:   var(--bs-spacer-5) !important; }

.me-0 { margin-right:  var(--bs-spacer-0) !important; } .me-1 { margin-right:  var(--bs-spacer-1) !important; }
.me-2 { margin-right:  var(--bs-spacer-2) !important; } .me-3 { margin-right:  var(--bs-spacer-3) !important; }
.me-4 { margin-right:  var(--bs-spacer-4) !important; } .me-5 { margin-right:  var(--bs-spacer-5) !important; }

/* auto margins */
.m-auto  { margin: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }